.messageContainer {
    width: 100%;
    height: 584px;
    background: white;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 0 24px;
    overflow-y: auto;
}


.header {
    display: flex;
    height: 56px;
    box-sizing: border-box;
    border-bottom: 1px solid #EBEDF0;
    justify-content: space-between;
    align-items: center;
    .title {
        font-size: 14px;
        font-weight: 700;
        color: #323233;
        box-sizing: border-box;
        padding-left: 11px;
        position: relative;
        &:before {
            display: block;
            content: '';
            width: 3px;
            height: 14px;
            background: #01B2A8;
            position: absolute;
            left: 0;
            top: calc(50% - 7px);
        }
    }
    .btnMore {
        font-size: 14px;
        color: #969799;
        position: relative;
        padding-right: 18px;
        &:after {
            display: block;
            content: '';
            width: 12px;
            height: 12px;
            background: url(../../../../../assets/images/icon-right-arrow.png) center center no-repeat;
            background-size: cover;
            position: absolute;
            right: 0;
            top: calc(50% - 6px);
        }
    }
}

.messageList {
    .messageItem {
        border-bottom: 1px solid #B9B9D832;
        box-sizing: border-box;
        padding: 18px 16px;
        .up {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .mTitle {
                display: flex;
                align-items: center;
                .name {
                    font-size: 18px;
                    color: #0F0F21;
                    margin-left: 8px;
                }
                .icon {
                    display: block;
                    width: 20px;
                    height: 20px;
                    background: url(../../../../../assets/images/icon-success.png) center center no-repeat;
                    background-size: cover;
                    &.success {
                        background: url(../../../../../assets/images/icon-success.png) center center no-repeat;
                        background-size: cover;
                    }
                    &.warning {
                        background: url(../../../../../assets/images/icon-warning.png) center center no-repeat;
                        background-size: cover;
                    }
                    &.error {
                        background: url(../../../../../assets/images/icon-error.png) center center no-repeat;
                        background-size: cover;
                    }
                }
            }
            .time {
                font-size: 14px;
                color: #969799;
            }
        }
        .content {
            margin-top: 6px;
            color: #969799;
            font-size: 12px;
        }
    }
}